<template>
  <!--文字List列表-->
  <div class="headswiper">
    <h2>{{ title }}</h2>
    <p style="float: right; cursor: pointer">
      <img src="../../public/imgs/left.png" width="10" style="margin-right: 10px" @click="left">
      <img src="../../public/imgs/right.png" width="10" @click="right">
    </p>
    <!--普通页-->
    <div class="headswiper-item" v-for="(_, index) in currentPageSize" v-show="!isLastPage">
      <a class="title">
        {{ list[index + currentPage * currentPageSize].title }}
      </a>
      <a class="context">
        {{ list[index + currentPage * currentPageSize].context }}
      </a>
    </div>

    <!--剩余页-->
    <div class="headswiper-item" v-for="(_, index) in lastPageSize" v-show="isLastPage">
      <a>
        <p class="title">{{ list[index + normalPage * pageSize].title }}</p>
      </a>
      <a>
        <p class="context">{{ list[index + normalPage * pageSize].context }}</p>
      </a>
    </div>
  </div>
</template>

<script>
export default {
  name: "SXQ-List",
  props: ['list', 'pageSize', 'title'],
  data() {
    return {
      currentPage: 0,
      // 正常页
      normalPage: 0,
      // 最后一个剩余页大小
      lastPageSize: 0,
      currentPageSize: this.pageSize,
      isLastPage: false,
    }
  },

  mounted() {
    this.normalPage = parseInt(this.list.length / this.pageSize)
    this.lastPageSize = this.list.length % this.pageSize
  },
  methods: {
    left() {
      this.currentPage--
      this.isLastPage = false
      if (this.currentPage < 0) {
        this.currentPage = 0
      }
    },

    right() {
      this.currentPage++
      if (this.currentPage >= this.normalPage) {
        this.currentPage = this.normalPage - 1
        if (this.lastPageSize !== 0) {
          this.isLastPage = true
        }
      } else {
        this.isLastPage = false
      }
    }
  }
}
</script>

<style scoped>
.headswiper {
  width: 298px;
  padding-left: 24px;
  padding-right: 24px;
}

.headswiper-item {
  margin-top: 24px;
}

.title {
  font-weight: bold;
  width: 250px;
  white-space: nowrap;
  color: #222226;
  font-size: 16px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  word-break: break-all;
  display: inline-block;
}

.title:hover {
  text-decoration: underline;
}

.context {
  width: 250px;
  white-space: nowrap;
  font-size: 14px;
  color: #999;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  word-break: break-all;
  display: inline-block;
}
</style>